<template>
  <div class="fill-parent bodys"
       dg-chart-auto-resize="true"
       dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
       dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#141c47'}">
    <div class="head">
      <div class="title">
        <div class="title-left">
          <ul class="title-left-item">
            <li>
              <div class="chinese">G O O D W E</div>
              <div class="english">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Clean power for all</div>
            </li>
          </ul>
        </div>
        <div class="title-value">
          <label>模 组 二 线 生 产 管 理 信 息 系 统</label>
          <div class="english">Module Two-Line Production Management System</div>
        </div>
        <div class="title-right">
            <div class="date-time">
              <label>2022-10-09 21:18:34</label>
              <label>星期日</label>
              <label>[Sunday]</label>
            </div>
        </div>
      </div>
    </div>
    <div class="output">
      <div class="output-content">
        <div class="output-left">
          <div class="headline">
            <div>模组二线当月产能</div>
            <div class="english">Module Two-Line Monthly Capacity</div>
          </div>
          <div class="month-number">
            <ul class="output-number">
              <li>0</li>
              <li>0</li>
              <li>3</li>
              <li>4</li>
              <li>3</li>
              <li>4</li>
            </ul>
          </div>
          <div class="unit">
              台 [PCS]
          </div>
        </div>

        <div class="output-right">
          <ul class="output-right-item">
            <li>
              <div class="chinese">固若磐石</div>
              <div class="english">Solid as a rock</div>
            </li>
            <li>
              <div class="chinese">德才兼备</div>
              <div class="english">Have both ability</div>
            </li>
            <li>
              <div class="chinese">威名远扬</div>
              <div class="english">World renowned</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="layout layout-left-top">
        <div class="panel border-all title-bg">
          <div class="title"><label>产线展示</label></div>
          <div class="chart carousel" dg-chart-widget="">
            <el-carousel :height="carouselHeight">
              <el-carousel-item v-for="item in carousels" :key="item">
                <img style="width: 100%;height: 100%" :src="item"/>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="border-foot"></div>
        </div>

      </div>
      <div class="layout layout-left-center">
        <div class="panel border-all title-bg">
          <div class="title"><label>当日产量</label></div>
          <div class="chart day" dg-chart-widget="" style="top: 0rem">
            <BarChart :chart-data="barChartData"></BarChart>
          </div>
          <div class="border-foot"></div>
        </div>
      </div>
      <div class="layout layout-left-bottom">
        <div class="panel border-all title-bg">
          <div class="title"><label>当月产量</label></div>
          <div class="chart month" dg-chart-widget="" style="top: 0rem">
            <BarChart :chart-data="barChartData"></BarChart>
          </div>
          <div class="border-foot"></div>
        </div>
      </div>
      <div class="layout layout-center-top">
        <div class="panel border-all">
          <div class="title"><label></label></div>
          <div class="chart" dg-chart-widget="">
            <div class="daily-output">
              <div class="headline">
                <div>当日总产能 </div>
                <div class="english" style="margin-top: .2rem">Day Capacity </div>
              </div>
              <ul class="daily-output-number">
                <li>0</li>
                <li>0</li>
                <li>3</li>
                <li>4</li>
              </ul>
              <div class="unit">
                台 [PCS]
              </div>
            </div>
            <div class="station">
              <StationChart :chart-data="stationData"></StationChart>
            </div>
          </div>
          <div class="border-foot"></div>
        </div>
      </div>
<!--      <div class="layout layout-center-bottom">
        <div class="panel border-all">
          <div class="title"><label></label></div>
          <div class="chart" dg-chart-widget="">
            <BarChart :chart-data="barChartData"></BarChart>
&lt;!&ndash;            <div style="height: 100%;width: 100%;background-color: #00a0e9"></div>&ndash;&gt;
          </div>
          <div class="border-foot"></div>
        </div>
      </div>-->
      <div class="layout layout-right-top">
        <div class="panel border-all title-bg">
          <div class="title"><label>当前工单进度</label></div>
          <div class="chart" dg-chart-widget=""></div>
          <div class="border-foot"></div>
        </div>
      </div>
<!--      <div class="layout layout-right-bottom">
        <div class="panel border-all title-bg">
          <div class="title"><label>标题7</label></div>
          <div class="chart" dg-chart-widget=""></div>
          <div class="border-foot"></div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import carousel1 from '@/views/device/kanban/images/carousel-1.jpg'
import carousel2 from '@/views/device/kanban/images/carousel-2.jpg'
import BarChart from './chart/BarChart'
import StationChart from './chart/StationChart'
export default {
  name: 'KanBan',
  components: {
    BarChart,
    StationChart
  },
  data() {
    return {
      carousels: [carousel1,carousel2],
      carouselHeight: '250px',
      barChartData: {
        ngData: [100, 120, 161, 134, 105, 160, 165],
        okData: [1200, 820, 910, 1540, 1620, 1400, 1450]
      },
      stationData: { }
    }
  },
  methods: {

  },
  mounted() {
    window.addEventListener('resize', () =>{
      // 获取轮播父级高度
      let fatherHeight = document.getElementsByClassName('carousel')[0].offsetHeight - 16
      this.carouselHeight = fatherHeight + 'px';
    });
    //修改轮播图高度
    this.carouselHeight = (document.getElementsByClassName('carousel')[0].offsetHeight - 16 ) + 'px';
  }
}
</script>

<!--轮播-->
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

<style scoped>

.output-right-item,.title-left-item,.output-number, .daily-output-number {
  list-style:none;
  margin: 0;
  padding: 0;
}
.output-number,.daily-output-number {
  display: inline-block;
}

.output-right-item li {
  float: left;
  width: 33%;
  font-size: 1.4rem;
  font-weight: bold;
}

.output-number li{
  float: left;
  line-height: 3rem;
  text-align: center;
  background-color: #488aff;
  font-size: 2rem;
  font-weight: bold;
  margin-right: .5rem;
  margin-left: .5rem;
  margin-top: .6rem;
  width: 2.5rem;
  height: 3rem;
}

.daily-output-number li {
  float: left;
  line-height: 2.5rem;
  text-align: center;
  background-color: #488aff;
  font-size: 1.4rem;
  font-weight: bold;
  margin-right: .5rem;
  margin-left: .5rem;
  margin-top: .6rem;
  width: 1.8rem;
  height: 2.5rem;
}

.month-number {
  position: absolute;
  left: 35%;
  right: 35%;
  text-align: center;
}

.output-left .headline {
  position: absolute;
  left: 0;
  right: 63%;
}

.daily-output .headline {
  float: left;
  width: 35%;
  height: 100%;
  text-align: right;
  font-weight: bold;
  font-size: 1rem;
  padding-top: .8rem;
}
.daily-output .unit {
  float: right;
  height: 100%;
  width: 35%;
  text-align: left;
  font-weight: bold;
  padding-top: 1rem;
}

.output-left .unit{
  position: absolute;
  right: 32%;
  padding-top: .5rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: left;
}

.title-left-item li {
  float: left;
  text-align: left;
  width: 100%;
  font-size: 2.1rem;
  font-weight: bold;
  font-family: 'Fantasy';
}

ul li .english,.title-value .english,.output-left .english ,.daily-output .english{
  font-size: .4rem;
  line-height: .4rem;
  font-weight: bold;
}

.date-time {
  font-size: .9rem;
  padding-left: 30%;
}

.date-time label {
  margin-right: 1rem;
}


.chart:empty{
  border: 1px dashed;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  opacity: 0.3;
}
.chart:empty::after{
  content: "图表";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
}

.bodys{
  color: #FFF;
  margin: 0 0;
  padding: 0 0;
  background: url(images/bg.png);
}
.fill-parent{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.head{
  height: 3rem;
  background: url(images/title.png);
  background-size: 100% 100%;
}
.head .title{
  font-size: 1.8rem;
  text-align: center;
  margin-top: 0.5rem;
  height: 3rem;
  line-height: 3rem;
  position: relative;
}
.head .title .title-left{
  position: absolute;
  top: 1rem;
  left: 0;
  width: 35%;
  height: 100%;
  margin-top: -1.5px;
  padding-left: 1rem;
  /*background: #0089ff;*/
}
.head .title .title-value{
  position: absolute;
  top: -.8rem;
  left: 35%;
  right: 35%;
  bottom: 0;
  font-size: 1.3rem;
  /*border-right: 3px solid #0089ff;
  border-left: 3px solid #0089ff;*/
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.head .title .title-right{
  position: absolute;
  top: -.8rem;
  right: 0;
  width: 35%;
  height: 100%;
  margin-top: -1.5px;
  /*background: #0089ff;*/
}

.content{
  position: absolute;
  top: 7rem;
  right: 0;
  bottom: 0;
  left: 0;
}
.output {
  position: absolute;
  height: 4rem;
  width: 100%;
  top: 3rem;
}
.output .output-content{
  font-size: 1.8rem;
  text-align: center;
  margin-top: 0.5rem;
  height: 4rem;
  line-height: 3rem;
  position: relative;
}
.output .output-content .output-left{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 60rem;
  height: 100%;
  margin-top: -1.5px;
 /* padding-left: 20%;*/
  text-align: right;
  font-size: 1.4rem;
  font-weight: bold;
  /*background: #0089ff;*/
}

.output .output-content .output-right{
  position: absolute;
  top: -.5rem;
  right: 0;
  width: 30%;
  height: 100%;
  margin-top: -1.5px;
  /*background: #0089ff;*/
}

.daily-output {
  position: relative;
  height: 20%;
  text-align: center;
}

.station {
  height: 80%;
  position: relative;
}


.layout{
  position: absolute;
  width: 25%;
}
.layout-left-top{
  left: 0;
  top: 0;
  height: 50%;
}
.layout-left-center{
  top: 50%;
  left: 0%;
  right: 0%;
  bottom: 0;
  width: 50%;
}
.layout-left-bottom{
  top: 50%;
  left: 50%;
  right: 0%;
  bottom: 0;
  width: 50%;
}
.layout-center-top{
  top: 0;
  left: 25%;
  right: 25%;
  width: 50%;
  height: 50%;
}
.layout-center-bottom{
  top: 50%;
  left: 0%;
  right: 0%;
  bottom: 0;
  width: 50%;
}
.layout-right-top{
  top: 0;
  right: 0;
  height: 50%;
}
.layout-right-bottom{
  top: 50%;
  right: 0;
  bottom: 0;
}
.panel{
  position: absolute;
  left: 0.5rem;
  top: 0.8rem;
  right: 0.5rem;
  bottom: 0.8rem;
  border: 1px solid #20558b;
  -webkit-box-shadow: #07417a 0 0 10px;
  -moz-box-shadow: #07417a 0 0 10px;
  box-shadow: inset 0 0 30px #07417a;
}
.panel.border-left-top:before,
.panel.border-all:before{
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-top: 3px solid #488aff;
  border-left: 3px solid #488aff;
  left: -1px;
  top: -1px;
}
.panel.border-right-top:after,
.panel.border-all:after{
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-top: 3px solid #488aff;
  border-right: 3px solid #488aff;
  right: -1px;
  top: -1px;
}
.panel.border-left-bottom .border-foot:before,
.panel.border-all .border-foot:before{
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-bottom: 3px solid #488aff;
  border-left: 3px solid #488aff;
  left: -1px;
  bottom: -1px;
}
.panel.border-right-bottom .border-foot:after,
.panel.border-all .border-foot:after{
  position: absolute;
  width: 1rem;
  height: 1rem;
  content: "";
  border-bottom: 3px solid #488aff;
  border-right: 3px solid #488aff;
  right: -1px;
  bottom: -1px;
}
.panel > .title{
  position: absolute;
  top: 0.2rem;
  right: 0.5rem;
  left: 0.5rem;
  line-height: 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}
.panel.title-bg > .title{
  position: absolute;
  top: -0.8rem;
  right: 20%;
  left: 20%;
  text-align: center;
  color: #fff;
  background: url(images/title-bg.png);
  background-size: 100% 100%;
}
.panel .chart{
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
}
.panel.title-bg .chart{
  top: 1.4rem;
}
.layout-center-bottom .panel{
  background-image: -webkit-radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0));
  background-image: radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0));
}
</style>
